<template>
  <div class="gentle-content-wrapper">
    <div class="gentle-content-wrapper-center">
      <div class="gentle-content-wrapper-content" style="display: flex;  flex-direction: column; ">
        <div class="components-input-demo-size">
          <span>关键词</span>
          <a-input placeholder="default size" />
          <a-button type="primary">
            查询 </a-button>
          <a-button style="margin-left: 8px;">
            重置
          </a-button>
        </div>
        <div style="  display: flex; margin-top: 8px; width: 100%; height: 90%;  background-color: #FFFFFF;">
          <!-- 放左列表格的数据 -->
          <div style=" width: 50%; height: 100%;   padding: 10px 10px;  overflow-y: auto; ">
            <a-table :scroll="{ x: 500 }" :columns="columns" :data-source="data" :rowSelection="rowSelection" bordered>
              <template #bodyCell="{ column, record }">
                <template v-if="column.dataIndex === 'Operation'">
                  <a-button type="primary">
                   编辑 </a-button>
                </template>
              </template>
            </a-table>
          </div>
          <!-- 放右列表格的数据 -->
          <div style=" width: 50%; height: 100%;padding: 10px 10px;  overflow-y: auto; ">
            <a-table :scroll="{ x: 500 }" :dataSource="dataSource" :columns="columnss" :bordered="true"
              :pagination="false" />
            <div style="width: 100%;  margin-top: 8px; display: flex; flex-direction: row-reverse;">
              <a-button type="primary">
                保存 </a-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>

import { ref } from 'vue';

interface DataType {
  key: number;
  name?: string;
  age: number;
  address: string;
}
interface DataItem {
  key: number;
  name: string;
  age: number;
  address: string;
  children?: DataItem[];
}
// 列表数据
const columns = [
  {
    title: '机台号',
    dataIndex: 'age',
    width: 80,
  },
  {
    title: '机器状态',
    dataIndex: 'address',
    ellipsis: true,
  },
  {
    title: '操作',
    dataIndex: 'Operation',
    ellipsis: true,
  },
];
// 单选-选择的数据

const selectedRowKeyss = ref([0])
const rowSelection = ref({
  type: 'radio',
  selectedRowKeys: selectedRowKeyss,
  onChange: (selectedRowKeys: (string | number)[], selectedRows: DataItem[]) => {
    selectedRowKeyss.value = selectedRowKeys
  },
  onSelect: (record: DataItem, selected: boolean, selectedRows: DataItem[]) => {
    console.log(2);
    console.log(record, selected, selectedRows);
  },
  onSelectAll: (selected: boolean, selectedRows: DataItem[], changeRows: DataItem[]) => {
    console.log(3);
    console.log(selected, selectedRows, changeRows);
  },
});
// 展示数据
const data: DataType[] = [];
for (let i = 0; i < 90; i++) {
  data.push({
    key: i,
   
    age: 32,
    address: `London, Park Lane no. ${i}`,
  });
}


// 右边展示数据-随选中不断切换
const dataSource = [{
  key: 0,
  name: `工艺卡号`,
  age: 1,
  address: `1`,
  Operation: "加绒毛",

}]
const columnss = [
  {
    title: '工艺卡号',
    dataIndex: 'name',
  },
  {
    title: '队列',
    dataIndex: 'age',
    width: 80,
  },
  {
    title: '物料',
    dataIndex: 'Operation',
    ellipsis: true,
  },
  {
    title: '操作',
    dataIndex: 'address',
    ellipsis: true,
  },
 
]

</script>
<style lang="less" scoped>
.components-input-demo-size {
  padding: 8px 8px;
  background-color: #FFFFFF;
}

.components-input-demo-size .ant-input {
  width: 200px;
  margin: 0px 8px 0px 8px;
}
</style>
